<template>
	<view class="history">
		<up-datetime-picker
			class="datepicker"
			hasInput=true
			:show="show"
			v-model="store.date"
			mode="date"
			placeholder="定位日期选择"
			@confirm="store.firstDate()"
		></up-datetime-picker>
		<view class="history_div">
			<up-loading-icon v-if="store.show==0" class="loading" text="加载中" textSize="18"></up-loading-icon>
			<up-empty class="empty" v-else-if="store.show==1" :show="true" text="没有历史记录" mode="history"></up-empty>
			<scroll-view v-else-if="store.show==2" class="history_scroll" :scroll-y="true" 
			@scrolltolower=store.loadHistory() :lower-threshold='150'>
				<view class="history_item" v-for="item in store.historyList">
					<view class="submit_time">时间：{{item.submit_time}}</view>
					<view class="address">地点：{{item.address}}</view>
					<view class="spend_time">全程耗时：{{item.spend_time}}</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
import { onMounted, onUnmounted,ref} from 'vue';
import useHistoryStore from '../../store/history';
const store=useHistoryStore()
const show = ref(false);
onMounted(()=>{
	store.searchHistory()
})
onUnmounted(()=>{
	store.show=true
	store.page=1
	store.historyList=[]
	store.finish=false
})
</script>

<style scoped>
uni-page-body{
	height: 100%;
}
.history{
 	display: flex;
 	width: 750rpx;
 	height: 100%;
 	margin: 0 auto;
 	background-color: #F7F7F7;
 	box-sizing: border-box;
	flex-direction: column;
}
.history_div{
 	width:630rpx;
 	height: 1200rpx;
 	background-color: white;
 	margin-left: 30rpx;
 	margin-right: 30rpx;
 	margin-top: 30rpx;
 	border-radius: 30rpx;
 	padding: 30rpx;
	margin-bottom: 30rpx;
	display: flex;
}
.history_scroll{
	 flex: 1;
}
.empty{
	flex:1;
}
.history_item{
	 height: 120rpx;
	 border-bottom: 1px solid #ccc;
	 display: flex;
	 flex-direction: column;
	 justify-content: space-around;
}

.submit_time,.spend_time,.address{
	color: #7b7b7b;
	font-size: 26rpx;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}
.loading{
	width: 100%;
}
.datepicker{
	background-color: white;
	width: 690rpx;
	margin-left: 30rpx;
	margin-right: 30rpx;
	margin-top: 30rpx;
}
</style>
